@use '../tp';

.#{tp.$prefix}-colv {
	position: relative;

	&_h {
		display: flex;
	}
	&_s {
		flex-grow: 0;
		flex-shrink: 0;
		width: tp.cssVar('container-unit-size');
	}
	&_t {
		flex: 1;
		margin-left: 4px;
	}
	&_p {
		height: 0;
		margin-top: 0;
		opacity: 0;
		overflow: hidden;
		transition: height tp.$fold-transition-duration ease-in-out,
			opacity tp.$fold-transition-duration linear,
			margin tp.$fold-transition-duration ease-in-out;
	}
	&#{&}-expanded#{&}-cpl &_p {
		overflow: visible;
	}
	&#{&}-expanded &_p {
		margin-top: tp.cssVar('container-unit-spacing');
		opacity: 1;
	}

	.#{tp.$prefix}-popv {
		left: calc(-1 * #{tp.cssVar('container-h-padding')});
		right: calc(-1 * #{tp.cssVar('container-h-padding')});
		top: tp.cssVar('container-unit-size');
	}
}
